import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router'
import Module from '../../lib/module'

import { Button, Row, Col, Input, Slider, Table, Breadcrumb } from 'antd';

const Search = Input.Search;

import {store} from '../../../index';

class CarBaseInfo extends Module {
    constructor(props, context) {
        super(props, context);
        this.state = {
            columns:[{
                title: '车辆编号',
                dataIndex: 'number',
                render: (number, obj) => {
                   return <Link to={{ pathname: '/CarDetailInfo', query: { 'status': obj.status, 'currentCar': number } }}>{number}</Link>
                }
            }, {
                title: '车辆型号',
                dataIndex: 'carType',
            }, {
                title: '进馆时间',
                dataIndex: 'time',
            }, {
                title: '维修次数',
                dataIndex: 'num',
            }, {
                title: '工作状态',
                dataIndex: 'status',
                render: status => {
                    if(status === 0) {
                       return <span>休息</span>;
                    }
                    if(status === 1) {
                        return <span>工作</span>;
                    }
                    if(status === 2) {
                        return <span style={{color: 'red'}}>故障</span>;
                    }
                }
            }],
            data: [{
                key: '1',
                number: 'car1',
                carType: 'T35',
                time: '2018年01月11日',
                num: '2',
                status: 1
            }, {
                key: '2',
                number: 'car2',
                carType: 'T35',
                time: '2018年01月11日',
                num: '0',
                status: 2
            }, {
                key: '3',
                number: 'car3',
                carType: 'T35',
                time: '2018年01月11日',
                num: '3',
                status: 0
            }],
        };
    }

    componentDidMount() {
    }

    tableFooter = () => {
        return (
            <div style={{textAlign: 'right'}}>
                车辆总数:
                <span style={{fontSize: '20px', color: '#333', marginLeft: '10px'}}>2辆</span>
            </div>
        )
    }

    render() {
        console.log("render")
        let { columns, data } = this.state;
        return <div className="N_car-baseInfo">

            <Breadcrumb className="N_Breadcrumb">
                <Breadcrumb.Item>车辆</Breadcrumb.Item>
                <Breadcrumb.Item><Link to="/CarBaseInfo">车辆基本信息</Link></Breadcrumb.Item>
            </Breadcrumb>

            <div className="N_filter-bar">
                <span>归属门店:</span>
                <ul className="mt">
                    <li className="current">滨江店</li>
                    <li>西湖店</li>
                    <li>上城店</li>
                </ul>
            </div>

            <Row style={{margin: '30px auto'}}>
                <Col span={12} offset={6}>
                    <Search
                        placeholder="搜索"
                        enterButton="查询"
                        size="large"
                        onSearch={value => console.log(value)}
                    />
                </Col>
            </Row>
            <Table
                columns={columns}
                dataSource={data}
                bordered
                footer={ this.tableFooter }
                style={{margin: '20px'}}
            />
        </div>
    }
}

export default CarBaseInfo;
